<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单</title>
    </head>

    <body>

        <!-- 元素 form 可以表示页面上的表单，通过表单可以向服务器端 提交 数据 -->
        <form action="http://www.baidu.com/s" >

            <!-- 当 input 元素的 type 属性为 text 时则该元素表示 单行文本框 -->
            <div> 文本框 <input type="text" name="wd" >  </div>

            <!-- 当 input 元素的 type 属性为 password 时则该元素表示 密码输入框 -->
            <div> 密码框 <input type="password" name="passwd" >  </div>

            <div> 
                性别:
                <input type="radio" name="gender" value="male" id="gender1"> 
                <label for="gender1">靓仔</label>
                <!-- 当 input 元素的 type 属性为 radio 时则该元素表示 单选按钮 ( 也叫做 单选框 )  -->
                <input type="radio" name="gender" value="female" id="gender2">  
                <label for="gender2">靓妹</label>
                <input type="radio" name="gender" value="none" id="gender3">  
                <label for="gender3">保密</label>
            </div>

            <div> 
                爱好:
                <input type="checkbox" name="hobby" value="eat" id="hobby1"> 
                <label for="hobby1">吃</label>
                <!-- 当 input 元素的 type 属性为 checkbox 时则该元素表示 多选按钮 ( 或者称作 多选框 / 复选框)  -->
                <input type="checkbox" name="hobby" value="eat-ji" id="hobby2">  
                <label for="hobby2">吃鸡</label>
                <input type="checkbox" name="hobby" value="sleep" id="hobby3">  
                <label for="hobby3">睡觉</label>
            </div>

            <div>
                告白:
                <!-- textarea 表示 文本域 ( 也称作 多行文本框 )-->
                <textarea name="gao-bai"></textarea>
            </div>

            <div>
                籍贯:
                <select name="ji-guan">
                    <option value="jiangxi">江西</option>
                    <option value="jiangdong">江东</option>
                    <option value="jiangnan">江南</option>
                    <option value="jiangbei">江北</option>
                </select>
            </div>

            <div>
                <input type="reset"  value="重置按钮">
                <input type="submit"  value="提交按钮">
                <input type="button"  value="普通按钮">
            </div>

            <div>
               <button type="reset">重置按钮</button>
               <button type="submit">提交按钮</button>
               <button type="button">普通按钮</button>
            </div>

            <!-- 隐藏表单域 : 不在界面上显示的表单组件，但是会提交给服务器 -->
            <input type="hidden" name="id" value="250" >

            <hr>

            <!-- 文件选择器 : 实现文件上传时，选择文件操作 -->
            <input type="file" name="upfile" >

            <hr>

            <!-- HTML 5 新增 的支持 ( type="date" )-->
            <input type="date" name="birthdate" >

        </form>

    </body>

</html>